<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct">新建楼</el-button>
			</div>
			<el-row :gutter="20">
				<div style="margin:0 20px;">
					<el-form-item label="小区编号">
						<el-input v-model="queryParams.code" placeholder="请输入" clearable></el-input>
					</el-form-item>
					<el-form-item label="楼栋名" prop="name">
						<el-input v-model="queryParams.name" placeholder="请输入楼栋名" clearable size="small"
							@keyup.enter.native="getList" />
					</el-form-item>
					<el-form-item label="编号" prop="number">
						<el-input v-model="queryParams.number" placeholder="请输入编号" clearable size="small"
							@keyup.enter.native="getList" />
					</el-form-item>
				</div>
			</el-row>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<!-- <el-table-column label="编号" align="center" prop="id" /> -->
			<el-table-column label="小区" align="center" prop="blockName" />
			<el-table-column label="楼栋名" align="center" prop="name" />
			<el-table-column label="编号" align="center" prop="number" />
			<el-table-column label="公安号" align="center" prop="psn" />
			<el-table-column label="产籍号" align="center" prop="prn" />
			<el-table-column label="使用性质" align="center" prop="typUse" />
			<el-table-column label="建筑面积" align="center" prop="floorSpace" />
			<el-table-column label="层数" align="center" prop="floorNum" />

			<el-table-column label="物业费" align="center" prop="decStrataFee" />
			<el-table-column label="电梯费" align="center" prop="decElevatorFee" />
			<el-table-column label="电梯数" align="center" prop="evNum" />
			<el-table-column label="住宅户数" align="center" prop="numResTotal" />
			<el-table-column label="进户户数" align="center" prop="numRes" />
			<el-table-column label="空置户数" align="center" prop="numResVacant" />
			<el-table-column label="操作" align="center" width="220" fixed="right">
				<template slot-scope="scope">
					<div class="centered-content">
						<el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
							编辑
						</el-button>
						<el-button type="text" size="mini" class="deleteBtn" @click="delProduct(scope.row)">
							删除
						</el-button>
						<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
							详情
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 楼维护弹窗 -->
		<el-dialog title="楼维护" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
			width="50%">
			<el-form ref="form" :model="dataForm" :rules="rules" label-width="80px" :disabled="canEdit">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="小区" prop="block">
							<el-select v-model="dataForm.block" placeholder="请选择小区" clearable :style="{ width: '100%' }"
								:multiple="false">
								<el-option v-for="(item, index) in areaOptions" :key="index" :label="item.name"
									:value="item.code"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="编号" prop="number">
							<el-input v-model="dataForm.number" placeholder="请输入编号" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="楼栋名" prop="name">
							<el-input v-model="dataForm.name" placeholder="请输入楼栋名" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="建筑面积" prop="floorSpace">
							<el-input v-model="dataForm.floorSpace" placeholder="请输入建筑面积"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.floorSpace)" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="层数" prop="floorNum">
							<el-input v-model="dataForm.floorNum" placeholder="请输入层数"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.floorNum)" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="物业费" prop="decStrataFee">
							<el-input v-model="dataForm.decStrataFee" placeholder="请输入物业费" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="电梯费" prop="decElevatorFee">
							<el-input v-model="dataForm.decElevatorFee" placeholder="请输入电梯费" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="单元数量" prop="unitNum">
							<el-input v-model="dataForm.unitNum" placeholder="请输入单元数量"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.unitNum)" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="电梯数量" prop="evNum">
							<el-input v-model="dataForm.evNum" placeholder="请输入电梯数量"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.evNum)" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="住宅户数" prop="numResTotal">
							<el-input v-model="dataForm.numResTotal" placeholder="请输入住宅户数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="进户户数" prop="numRes">
							<el-input v-model="dataForm.numRes" placeholder="请输入进户户数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="空置户数" prop="numResVacant">
							<el-input v-model="dataForm.numResVacant" placeholder="请输入空置户数" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="公安号" prop="psn">
					<el-input v-model="dataForm.psn" placeholder="请输入公安号" />
				</el-form-item>
				<el-form-item label="产籍号" prop="prn">
					<el-input v-model="dataForm.prn" placeholder="请输入产籍号" />
				</el-form-item>
				<el-form-item label="使用性质" prop="typUse">
					<el-input v-model="dataForm.typUse" placeholder="请输入使用性质" />
				</el-form-item>
				<!-- 没有 -->
				<!-- <el-form-item label="类型" prop="typUse">
			        <el-input v-model="" placeholder="请输入类型" />
			    </el-form-item> -->
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="!canEdit">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 上传文件
	import {
		selectBuildingBlock,
		insertBuildingBlock,
		editBuildingBlock,
		deleteBuildingBlock,
		selectHouseBlock
	} from '@/api/wuye.js'
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				areaOptions: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					block: null,
					name: null,
					number: null,
				},
				dataForm: {},
				rules: {
					block: [{
						required: true,
						message: '小区不能为空',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '楼栋名不能为空',
						trigger: 'blur'
					}],
					number: [{
						required: true,
						message: '编号不能为空',
						trigger: 'blur'
					}],
				},
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				visible: false,
				canEdit: false
			};
		},
		// 初始化
		mounted() {
			this.getList();
			this.getareaOptions();
		},
		// 函数集合
		methods: {
			getareaOptions() {
				selectHouseBlock().then(res => {
					this.areaOptions = res.rows;
				});
			},
			// 修改楼
			editProduct(row) {
				var type = "";
				this.canEdit = false;
				if (row.id) {
					// 修改
					type = "edit";
					this.dataForm = row;
				} else {
					// 新增
					type = "add";
					this.dataForm = {};
				}
				this.visible = true;
			},
			// 查看楼详情
			lookProduct(row) {
				this.dataForm = row;
				this.canEdit = true;
				this.visible = true;
			},
			// 删除楼
			delProduct(row) {
				this.$confirm("是否删除？", "提示", {
						confirmButtonText: "确 认",
						cancelButtonText: "取 消"
					})
					.then(() => {
						deleteBuildingBlock({
							...row
						}).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () => {
										this.visible = false;
										this.getList();
									},
								});
							}
						})
					})
					.catch(() => console.info("操作取消"));

			},
			//提交楼
			submitProduct() {
				this.$refs['form'].validate(valid => {
					if (valid) {
						if (this.dataForm.id) {
							editBuildingBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						} else {
							insertBuildingBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						}
					}
				})

			},
			//初始化列表
			getList() {
				this.loading = false;
				selectBuildingBlock({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.form = {
					id: null,
					block: null,
					name: null,
					number: null,
					delFlag: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
				};
				this.resetForm('form');
			},

		}
	}
</script>
<style scoped lang='scss'>
	.centered-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>